<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/normalize.css" />
		<link rel="stylesheet" href="./css/bootstrap.css">

		<style>
			body {
				width: 100vw;
				height: 100vh;
				background-color: #d7eded;
				background-size: cover;
			}

			.title {
				color: #FFFFFF;
				position: absolute;
				top: 10%;
				left: 5%;
				transform: translate(0, -50%);
			}

			.background {
				position: absolute;
				top: 50%;
				left: 10%;
				transform: translate(0, -50%);
			}

			.login {
				width: 30%;
				background: #F8F8F8;
				box-shadow: 2px 4px 10px -4px rgba(0, 0, 0, 0.25);
				border-radius: 6px;
				padding: 2%;
				position: absolute;
				top: 50%;
				left: 60%;
				transform: translate(0, -50%);
			}

			.userLogin {
				color: #10435d;
				font-size: 2em;
			}

			.userRegister {
				color: #B2B2B2;
				font-size: 2em;
				margin-left: 20px;
			}

			.edit {
				height: 50px;
				margin-top: 15px;
			}

			.edit-verify {
				width: 200px;
			}

			.btn-login {
				width: 100%;
				border-radius: 12px;
				color: white;
				height: 5%;
				margin-top: 8%;
			}

			a {
				text-decoration: none;
				color: #CCCCCC;
			}

			a:hover {
				color: #D26F44;
				text-decoration: none;
			}
		</style>

	</head>
	<body>
		<div class="title">
			<h1>独角兽在线交易平台</h1>
		</div>
		<div class="background">
			<img src="img/background.png" style="width: 620px;">
		</div>
		<div class="login">
			<span class="userLogin">注册</span>
			<span class="userRegister"><a href="login.html">登录</a></span>

			<form action="#" method="post">
				<input type="text" id="username" class="form-control edit" placeholder="用户名"
					aria-describedby="basic-addon1" onblur="nameBlur()">
				<input type="text" id="password" class="form-control edit" placeholder="密码"
					aria-describedby="basic-addon1" onblur="pswBlur()">
				<input type="text" id="okpassword" class="form-control edit" placeholder="确认密码"
					aria-describedby="basic-addon1" onblur="OKpswBlur()">
				<input type="text" id="email" class="form-control edit" placeholder="邮箱" aria-describedby="basic-addon1"
					onblur="emailBlur()">
				<button type="submit" class="btn btn-primary btn-login">注册</button>
			</form>


		</div>

		<script type="text/javascript">
			var msg = document.getElementById("msg").value;

			if (msg != "") {
				window.alert(msg);
			}

			var nameverify = document.getElementById("name-verify");
			var pswverify = document.getElementById("psw-verify");
			var okpswverify = document.getElementById("okpsw-verify");
			var emailverify = document.getElementById("email-verify");
			nameverify.style.display = 'none';
			pswverify.style.display = 'none';
			okpswverify.style.display = 'none';
			emailverify.style.display = 'none';

			function nameBlur() {
				nameverify.style.display = 'none';
				var name = document.getElementById("username").value;
				var reg = /[A-Za-z0-9]+$/;
				var result = reg.test(name.trim());
				if (result && name != "") {
					nameverify.style.display = 'none';
				} else {
					nameverify.style.display = '';
				}
			}

			function pswBlur() {
				pswverify.style.display = 'none';
				var name = document.getElementById("password").value;
				var reg = /[A-Za-z0-9]+$/;
				var result = reg.test(name.trim());
				if (result && name != "") {
					pswverify.style.display = 'none';
				} else {
					pswverify.style.display = '';
				}
			}

			function OKpswBlur() {
				okpswverify.style.display = 'none';
				var okpsw = document.getElementById("okpassword").value;
				var psw = document.getElementById("password").value;
				if (psw == okpsw && okpsw != "") {
					okpswverify.style.display = 'none';
				} else {
					okpswverify.style.display = '';
				}
			}
		</script>
	</body>
</html>
